<template>
  <el-container class="home-content">
     <el-header class="main-header">
      <el-collapse v-model="collapseActive">
        <el-collapse-item title="高级筛选" class="collapse-title" name="collapseHeader">
          <el-button type="primary" @click="refresBigArr">随机大写字母</el-button>
          <el-button type="primary" @click="refresSmallArr">随机小写字母</el-button>
          <el-button type="primary" @click="refresComArr">随机组合字母</el-button>
          <el-button type="primary" @click="searchBigAll">查看全部大写字母</el-button>
          <el-button type="primary" @click="searchSmallAll">查看全部小写字母</el-button>
          <el-button type="primary" @click="searchComAll">查看全部组合字母</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-header>
    <el-main class="main-content">
      <RandomLetter class="infinite-list-item" :randomData='randomLetterArr'></RandomLetter>
    </el-main>
  </el-container>
</template>

<script>
import { ref, onMounted, reactive } from 'vue'
import RandomLetter from '@/components/RandomItem.vue';

export default {
  name: 'edu-number',
  components: {
    RandomLetter
  },
  setup() {
    const randomLetterArr = reactive([]);
    const collapseActive = ref('collapseHeader');
    const bigLetterArr = reactive(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']);
    const smallLetterArr = reactive(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']);
    const comLetterArr = reactive(['Aa', 'Bb', 'Cc', 'Dd', 'Ee', 'Ff', 'Gg', 'Hh', 'Ii', 'Jj', 'Kk', 'Ll', 'Mm', 'Nn', 'Oo', 'Pp', 'Qq', 'Rr', 'Ss', 'Tt', 'Uu', 'Vv', 'Ww', 'Xx', 'Yy', 'Zz']);
    const createRandomNumber = (count, letterArr) => {
      clear();
      while (count > 0) {
        randomLetterArr.push(letterArr[Math.floor(Math.random() * 26)]);
        count--;
      }
    }
    const refresBigArr = () => {
      createRandomNumber(20, bigLetterArr);
    };
    const refresSmallArr = () => {
      createRandomNumber(20, smallLetterArr);
    };
    const refresComArr = () => {
      createRandomNumber(20, comLetterArr);
    };

    const searchBigAll = () => {
      clear();
      let count = 0;
      while (count < 26) {
        randomLetterArr.push(bigLetterArr[count]);
        count++;
      }
    }

    const searchSmallAll = () => {
      clear();
      let count = 0;
      while (count < 26) {
        randomLetterArr.push(smallLetterArr[count]);
        count++;
      }
    }
    const searchComAll = () => {
      clear();
      let count = 0;
      while (count < 26) {
        randomLetterArr.push(comLetterArr[count]);
        count++;
      }
    }

    const clear = () => {
      randomLetterArr.length = 0;
    }

    onMounted(() => {
      refresBigArr(100);
    });

    return { collapseActive, randomLetterArr, refresBigArr, refresSmallArr, refresComArr, searchBigAll, searchSmallAll, searchComAll }
  }

}
</script>

<style>

</style>